<template>
  <div>
    <nav>
      <nav-bar />
      <van-tabs>
        <van-tab
          scrollspy="tree"
          :title="item.name"
          v-for="item in topnav"
          :key="item.id"
        ></van-tab>
      </van-tabs>
    </nav>
    <main>
      <div>
        <img class="imgUrl" :src="$img + goodsInfo.img" alt="" />
      </div>
      <p>{{ goodsInfo.goodsname }}</p>
      <p>&yen;{{ goodsInfo.price ? goodsInfo.price.toFixed(2) : 0.0 }}</p>
      <div>购买数量：<van-stepper v-model="value" /></div>
      <div>
        商品属性：<van-button
          v-for="item in goodsInfo.specsattr"
          :key="item"
          type="default"
          size="small"
          >{{ item }}</van-button
        >
      </div>
      <div>
        商品详情:
        <div v-html="goodsInfo.description" />
      </div>
    </main>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        @click="goCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { goodsInfo, addCart } from "@/util/axios";
import navBar from "@/components/navBar";
import { Dialog } from "vant";
export default {
  data() {
    return {
      activeNames: ["1"],
      goodsInfo: "",
      topnav: [
        {
          id: 1,
          name: "商品",
        },
        {
          id: 2,
          name: "评价",
        },
        {
          id: 3,
          name: "详情",
        },
        {
          id: 4,
          name: "推荐",
        },
      ],
      value: "",
    };
  },
  components: {
    navBar,
  },
  mounted() {
    goodsInfo({ id: this.$route.query.id }).then((res) => {
      if (res.code == 200) {
        this.goodsInfo = res.list[0];
        this.goodsInfo.specsattr = this.goodsInfo.specsattr
          ? this.goodsInfo.specsattr.split(",")
          : [];
      }
    });
  },
  methods: {
    // 封装加入购物车事件
    goCart() {
      //是否登陆，如果登陆就直接调取接口，如果没有登陆就提示去登陆
      if (this.$store.state.userInfo) {
        //调用添加购物车接口并跳转到购物车
        addCart({
          uid: this.$store.getters.getUserInfo.uid,
          goodsid: this.goodsInfo.id,
          num: this.value,
        }).then((res) => {
          if (res.code == 200) {
            //跳转到购物车
            this.$router.push("/cart");
          }
        });
      } else {
        Dialog.confirm({
          title: "未登录",
          message: "未登录，不能加入购物车",
        })
          .then(() => {
            //确定
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 封装去买买买事件
    goBuy() {
      Dialog.alert({
        title: "没订单页",
        message: "还没订单页",
      }).then(() => {
        // on close
      });
    },
  },
};
</script>

<style lang="" scoped>
nav {
  overflow: hidden;
  box-sizing: border-box;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
}
nav >>> .van-tabs__nav {
  background-color: transparent;
}
nav >>> .van-tab {
  color: #fff;
}
nav >>> .van-tabs__line {
  background-color: #fff;
}
main {
  margin-bottom: 0.5rem;
}
main .imgUrl {
  width: 100%;
}
.van-goods-action {
  box-shadow: 0 -5px 10px 0 rgba(204, 204, 204, 0.2), 0 0 0 0 #ccc;
}
</style>